  <template>
  <div>
    <el-table
      :header-cell-style="{
        background: '#f4f6fa',
        color: '#666666',
        height: '44px',
      }"
      style="width: 100%"
      :data="list.currentPageRecords"
    >
      <el-table-column label="序号" width="80" type="index"> </el-table-column>
      <el-table-column label="合作商名称" prop="name"> </el-table-column>
      <el-table-column label="账号" prop="account"> </el-table-column>
      <el-table-column label="设备数量" prop="vmCount"> </el-table-column>
      <el-table-column label="成分比例" >
        <template v-slot='{row}'>
          {{`${row.ratio}%`}}
        </template>
      </el-table-column>
      <el-table-column label="联系人" prop="contact"> </el-table-column>
      <el-table-column label="联系电话" prop="account"> </el-table-column>
      <el-table-column label="操作" width="250">
        <template v-slot="{ row }">
          <el-row type="flex">
             <el-button type="text" @click="open(row)">重置密码</el-button>
            <el-button type="text"  @click="detailFn(row)"
              >查看详情</el-button
            >
            <el-button type="text"  @click="editFn(row)"
              >修改</el-button
            >
             <el-button type="text"  style="color: red" @click="delFn(row)">删除</el-button>

          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-row type="flex" justify="space-between">
        <el-col
          ><div class="leftDec">
            <span>{{
              `共${list.totalCount}条数据 第${list.pageIndex}/${list.totalPage}页`
            }}</span>
          </div></el-col
        >
        <el-col :span="4">
          <div>
            <el-pagination
              background
              layout="prev, next"
              prev-text="上一页"
              next-text="下一页"
              :current-page.sync="queryPage.pageIndex"
              @current-change="currentChangeFn"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 查看详情 -->
    <!-- <DetailDialog
      :dialogVisible.sync="detailDialogVisible"
      :DetailList="DetailList"
      :DetailObj="DetailObj"
    /> -->
    <!-- 修改 -->
    <!-- 修改 -->
    <editCoo
      :rows="rows"
      :visible.sync="editShow"
      :or="or"
    />
    <!-- 查看详情 -->
    <detail
      :DetailObj="DetailObj"
      :dialogTableVisible.sync="dialogTableVisible"
    />
  </div>
</template>

<script>
// import { detail } from '@/api/workorder'
// import DetailDialog from '@/views/Point/ Components/Distric/AreaDialog.vue'
import editCoo from '@/views/Point/ Components/Cooperation/editCoo.vue'
import detail from '@/views/Point/ Components/Cooperation/DetailCoo.vue'
import { delPainner, resetPainner } from '@/api/point'
const dayjs = require('dayjs')
export default {
  props: {
    list: {
      type: [Array, Object],
      required: true
    },
    searchStaus: Boolean,
    // 商圈列表
    businessList: {
      type: Array,
      default: () => []
    },
    // 区域列表
    areaList: {
      type: Array,
      default: () => []
    },
    // 合作商列表
    hzsList: {
      type: Array,
      default: () => []
    },
    areaCode: {
      type: Array,
      required: true
    }
  },
  created () {},
  data () {
    return {
      // 查看详情
      dialogTableVisible: false,
      addDialogShow: false,
      editShow: false,
      disabled: false,
      detailDialogVisible: false,
      DetailList: [],
      rows: {},
      queryPage: {
        pageIndex: 1,
        pageSize: 10
      },
      disable: false,
      or: null,
      row: {},
      DetailObj: {}
    }
  },
  methods: {
    currentChangeFn (val) {
      //   console.log(val)
      this.$emit('changePage', val)
    },
    async detailFn (row) {
      console.log('查看详情')
      this.dialogTableVisible = true
      this.DetailObj = row
      console.log(row)
    },
    editFn (row) {
      this.or = 2
      this.editShow = true
      this.rows = row
    },
    async open (row) {
      this.$confirm('确定要重置合作商密码吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await resetPainner(row.id)
        this.$message({
          type: 'success',
          message: '重置密码成功!'
        })
        this.getPointListFn()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async delFn (row) {
      this.$confirm('确定要删除此合作商吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delPainner(row.id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getPointListFn()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  components: { editCoo, detail },
  filters: {
    getNowTime (val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    },
    getAddr (val) {
      const str = val.split('-').pop()
      return str
    }
  },
  inject: ['getPointListFn']
}
</script>

<style lang="less" scoped>
/deep/.el-button {
  color: #5f84ff;
  // color: red;
  cursor: pointer;
}
/deep/.el-button:hover {
  color: #4b67d9;
}
// /deep/.el-table .el-table__cell {
//     box-sizing: border-box;
//     height: 44px !important;
// padding: 0 !important;
// }
/deep/ .el-table__cell {
  /* padding: 12px 0; */
  padding: 0 !important;
  height: 44px;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  border-bottom: none !important;
}
/deep/ .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  // /* border-bottom: 1px solid #EBEEF5; */
  border: none;
}
.page {
  box-sizing: border-box;
  width: 100%;
  height: 96px;
  background-color: #fff;
  padding: 32px 16px;
  .leftDec {
    text-align: left;
    span {
      color: #dcdfe4;
    }
  }
}
/deep/ .el-pagination span:not([class*="suffix"]) {
  display: inline-block;
  font-size: 13px;
  min-width: 70px;
  height: 32px;
  line-height: 32px;
  vertical-align: top;
  box-sizing: border-box;
  background-color: #d5ddf8;
  color: #606266;
  margin-right: 30px;
}
/deep/.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background {
  background-color: transparent !important;
}
/deep/ .el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: transparent !important;
}
/deep/.el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/deep/ .el-message-box__btns {
    padding: 5px 125px 0 !important;
    /* margin: auto; */
    // margin-left: 50px;
    text-align: right;
}
</style>
